/**
 * 设置指定DOM元素的CSS变量值。
 *
 * @param {string} prop - 要设置的CSS变量名称，例如 `--my-var`。
 * @param {string | null} val - 要设置的CSS变量值。如果为 `null`，则移除该变量。
 * @param {string | HTMLElement} [dom=document.documentElement] - 目标DOM元素或其选择器。默认为文档的根元素。
 *
 * @example
 * // 设置根元素的CSS变量
 * setCssVar('--primary-color', 'red');
 *
 * @example
 * // 设置特定元素的CSS变量
 * setCssVar('--primary-color', 'blue', '#myElement');
 */
export const setCssVar = (
  prop: string,
  val: string | null,
  dom: string | HTMLElement = document.documentElement,
) => {
  // 如果传入的是选择器字符串，则查找所有匹配的元素并设置CSS变量
  if (typeof dom === 'string') {
    const nodes = document.querySelectorAll(dom);
    nodes.forEach((node) => {
      (node as HTMLElement).style.setProperty(prop, val);
    });
  } else {
    // 如果传入的是HTMLElement，则直接设置CSS变量
    dom.style.setProperty(prop, val);
  }
};
